<template>
    <nav class="menu-container">
        <RouterLink :exact="n.exact" v-for="n in items" :key="n.name" :to="{ name: n.name }" active-class="selected"
            exact-active-class="">

            <div class="icon">
                <Icon :type="n.icon" />
            </div>
            <span>{{ n.title }}</span>
        </RouterLink>
    </nav>
</template>

<script>
import Icon from '@/components/Icon';
import { RouterLink } from 'vue-router';
export default {
    components: {
        Icon,
        RouterLink,
    },
    data() {
        return {
            items: [
                {
                    name: 'Home',
                    title: '首页',
                    icon: 'home',
                    exact: true,
                },
                {
                    name: 'Blog',
                    title: '文章',
                    icon: 'blog',
                    exact: false, // 激活状态是否要精确匹配
                },
                {
                    name: 'About',
                    title: '关于我',
                    icon: 'about',
                    exact: true,
                },
                {
                    name: 'Project',
                    title: '项目&效果',
                    icon: 'code',
                    exact: true,
                },
                {
                    name: 'Message',
                    title: '留言板',
                    icon: 'chat',
                    exact: true,
                },
            ]
        }
    },
}
</script>

<style lang="less" scoped>
@import '~@/styles/var.less';

.menu-container {
    color: @gray;
    margin: 24px 0;
    width: 100%;
    // height: 100%;

    a {
        padding: 0 50px;
        display: block;
        display: flex;
        align-items: center;
        height: 45px;

        .icon {
            width: 30px;

        }

        &:hover {
            color: #fff;
        }

        &.selected {
            background: #2d2d2d;
        }
    }

}
</style>